<script setup lang='ts'>
import { reactive } from 'vue'
import Dialog from './components/dialog.vue'
import { WarningFilled, RemoveFilled } from '@element-plus/icons-vue'
defineOptions({
    name: 'Outpatient'
})

interface User {
    date: string
    name: string
    icon?: number
}

const formInline = reactive({
    user: '',
    region: '',
    date: '',
})
const tableData: User[] = [
    {
        date: '2016-05-03',
        name: 'Tom',
        icon: 1,
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        icon: 2,
    },
    {
        date: '2016-05-04',
        name: 'Tom',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
    },
]
const isdialog = ref(false)
const handleSelectionChange = (val: User[]) => {
    console.log(val, '双击行');
    isdialog.value = true
}
const onSubmit = () => {
    console.log('submit!')
}
</script>

<template>
    <div id="Outpatient">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="发药日期">
                <el-date-picker v-model="formInline.date" type="date" placeholder="开始日期" clearable />
            </el-form-item>
            <el-form-item label="发药日期">
                <el-date-picker v-model="formInline.date" type="date" placeholder="结束日期" clearable />
            </el-form-item>
            <el-form-item label="发药窗口">
                <el-input v-model="formInline.user" placeholder="发药窗口" clearable />
            </el-form-item>
            <el-form-item label="处方号">
                <el-input v-model="formInline.user" placeholder="处方号" clearable />
            </el-form-item>
            <el-form-item label="病人姓名">
                <el-input v-model="formInline.user" placeholder="病人姓名" clearable />
            </el-form-item>

            <br />

            <el-form-item label="开单科室">
                <el-input v-model="formInline.user" placeholder="开单科室" clearable />
            </el-form-item>
            <el-form-item label="开单医生">
                <el-input v-model="formInline.user" placeholder="开单医生" clearable />
            </el-form-item>
            <el-form-item label="&nbsp;&nbsp;&nbsp;发药人">
                <el-input v-model="formInline.user" placeholder="发药人" clearable />
            </el-form-item>
            <el-form-item label="&nbsp;&nbsp;&nbsp;药品">
                <el-input v-model="formInline.user" placeholder="药品" clearable />
            </el-form-item>
            <el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类别">
                <el-select v-model="formInline.region" placeholder="类别" clearable>
                    <el-option label="普通" value="shanghai" />
                    <el-option label="加急" value="beijing" />
                </el-select>
            </el-form-item>
        </el-form>
        <div class="herder">
            <div class="left">
                处方数：<span>10</span>总金额：<span>1500</span>
            </div>
            <div class="right">
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="info" @click="onSubmit">重置</el-button>
            </div>
        </div>
        <el-table :data="tableData" border style="width: 100%" @row-dblclick="handleSelectionChange">
            <el-table-column prop="" label="序号" width="80" />
            <el-table-column prop="" label="处方编号" />
            <el-table-column prop="" label="病人标识" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="" label="处方类型" />
            <el-table-column prop="" label="开单科室" />
            <el-table-column prop="name" label="开单医生" />
            <el-table-column prop="date" label="发布时间" />
            <el-table-column prop="name" label="发布人" />
            <el-table-column prop="" label="医保类型" />
            <el-table-column prop="" label="发药窗口" />
            <el-table-column prop="" label="药品总价" />
            <el-table-column prop="" label="类型" width="100">
                <template #default="scope">
                    <div v-if="scope.row.icon == '1'" style="display: flex;align-items: center;color: green;">
                        <el-icon style="color: green;font-size: 22px;">
                            <RemoveFilled />
                        </el-icon>
                        普通
                    </div>
                    <div v-if="scope.row.icon == '2'" style="display: flex;align-items: center;color: red;">
                        <el-icon style="color: red;font-size: 22px;">
                            <WarningFilled />
                        </el-icon>
                        加急
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="bottom">
            <el-pagination background layout="prev, pager, next" :total="50" class="mt-4" />
        </div>
        <Dialog :isdialog="isdialog"></Dialog>
    </div>
</template>

<style lang='scss' scoped>
#Outpatient {
    width: 100%;

    .herder {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 8px 0;

        .left {
            font-size: 18px;
            font-weight: 600;
            border-left: 5px solid #466cfa;
            padding-left: 15px;

            span {
                color: red;
                margin-right: 10px;
            }
        }

        .right {
            margin-right: 6%;
        }
    }

    .bottom {
        margin-top: 10px;
        display: flex;
        flex-direction: column-reverse;
    }

    .demo-form-inline .el-select {
        --el-select-width: 170px;
    }

    :deep(.el-input) {
        width: 170px !important;
    }
}
</style>
